<template>
	<ani :src="info.src" @complete="rolePlayComplete" loop="true" :speed="info.speed" x="175" y="160">
		<txt :text="info.name" x="10" y="40" size="14" color="#FFFFFF"></txt>
	</ani>
</template>

<script>
data(){
	return {
		info: {
			id: 1,
			name: "怪物名",
			status: 0,//0站立 1行走 2无 3物理 4无 5死亡
			dir: 4,//移动方向
			src: "res/ani/monster/1/monster_0_4.json",
			step: 1,//每次点击移动距离 步伐数
			x: 185,//地图坐标
			y: 95,//地图坐标
			speed: 4,//动画播放速度
		}
	}
}

create() {
	setTimeout(()=>{
		this.info.src = "res/ani/monster/" + this.info.id + "/monster_" + this.info.status + "_" + this.info.dir + ".json";
	},10);
	console.log("monster create", this.info);
}

update(delta) {

}

walk(event) {
	console.log("info walk");
	this.info.dir = this.getDir(event.x, event.y);
	this.info.step = 1;
	this.info.status = 1;
	this.roleMove();//开始移动
}

roleMove(){
	this.info.src = "res/ani/monster/" + this.info.id + "/monster_"+ this.info.status +"_"+ this.info.dir +".json";
	this.info.speed = 12;
}

rolePlayComplete(){
	if(this.info.status == 1 || this.info.status == 2){//人物移动动画完成恢复站立姿势
		this.info.status = 0;
		this.info.src = "res/ani/monster/" + this.info.id + "/monster_"+ this.info.status +"_"+ this.info.dir +".json";
		this.info.speed = 4;
	}
}

getDir(x, y) {//取人物朝向  8方向
	let roleX = 400;//this.roleNode.x
	let roleY = 300;//this.roleNode.y
	let angle = Math.atan2(x - roleX, y - roleY);
	angle = angle * (180/Math.PI) + 180; //0->7逆时针360 每个方向占45度  22.5 - 342.5  =  0方向
	if(angle <= 22.5 || angle > 337.5) {
		return 0;//上
	} else if(angle <= 337.5 && angle > 292.5) {
		return 1;//右上
	} else if(angle <= 292.5 && angle > 247.5) {
		return 2;//右
	} else if(angle <= 247.5 && angle > 202.5) {
		return 3;//右下
	} else if(angle <= 202.5 && angle > 157.5) {
		return 4;//下
	} else if(angle <= 157.5 && angle > 112.5) {
		return 5;//左下
	} else if(angle <= 112.5 && angle > 67.5) {
		return 6;//左
	} else if(angle <= 67.5 && angle > 22.5) {
		return 7;//左上
	}
}

destroyed() {
	
}

</script>